<template>
  <div>
    <h1>后台管理系统</h1>
    <el-form label-width="auto" :model="ruleForm" :rules="rules">
      <el-form-item prop="username">
        <el-input size="medium" clearable v-model="ruleForm.username">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="medium"
          show-password
          clearable
          v-model="ruleForm.password"
        >
          <i slot="prefix" class="el-input__icon el-icon-key"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input size="medium" clearable v-model="ruleForm.email">
          <i slot="prefix" class="el-input__icon el-icon-message"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-button-login"
          @click="register('ruleForm')"
          >注册</el-button
        >
      </el-form-item>
      <el-form-item>
        <p class="register" @click="this.$listeners.change">点我进行登录</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        email: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            max: 12,
            min: 6,
            message: "用户名长度最少6位最多12位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            max: 12,
            min: 6,
            message: "密码长度最少6位最多12位",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (!/^\w+@(qq|163)\.com$/.test(value)) {
                callback(new Error("邮箱格式错误, 支持QQ邮箱和163邮箱"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },   
  methods:{
      register(ruleForm){
          console.log(" ");
      }
  } 
};
</script>
<style scoped>
div {
  color: #fff;
}
.el-button-login {
  width: 100%;
}
p {
  color: #fff;
  text-align: left;
  cursor: pointer;
}
</style>